<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<body>
<style type="text/css">
	.layui-inline{
		width: 45%;
	}
	.layui-form-label{
		width: 20%;
	}
	.layui-input-block, .layui-input{
		width: 70%;
	}
	#sortable li{
		padding-left: 20px;
		height: 30px;
		line-height: 30px;
		margin-bottom: 10px;
		background: white;
	}
	.group_leader{
		background: red;
		color: white;
		padding: 3px 5px;
	}
	.ui-draggable:hover {
		cursor: pointer;
	}
</style>
	<c:if test="${tbClass == null}">
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend><a name="fixbar">分组</a></legend>
		</fieldset>
		<form id="tbClassForm" method="post" class="layui-form white-bg radius">
			<input type="hidden" id = "tbClassId" value="${id}">
			<div class="layui-form-item">
				<div class="layui-inline" style="margin-top:-85px;">
					<label class="layui-form-label">组数</label>
					<div class="layui-input-block">
						<input type="text" id="classNumber" class="layui-input" name="classNumber" value="${tbClass.classNumber}">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">分组条件顺序</label>
					<div class="layui-input-block">
						<ul id="sortable" style="margin-left: 75px">
							<li class="ui-state-default" title="sex">性别</li>
							<li class="ui-state-default" title="address">单位</li>
							<li class="ui-state-default" title="politics">政治面貌</li>
						</ul>
					</div>
				</div>
			</div>
			<div style="text-align: right; margin-top: 30px; margin-bottom: 30px;">
				<input type="button" class="layui-btn layui-btn-danger" value="提交分组" onclick="sub2()" />
				<input type="button" class="layui-btn layui-btn-primary" onclick="close2()" value="返回" />
			</div>
		</form>
	</c:if>
	
	<c:if test="${tbClass != null}">
	
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend><a name="fixbar">${tbClass.name}分组详情（双击设置组长）</a></legend>
		</fieldset>
		<c:forEach var="s"  begin="1" end="${tbClass.classNumber}">
			<div class="layui-card" style="width: 30%; margin-right: 3%; float: left;">
			  	<div class="layui-card-header"><h3>第${s}组</h3></div>
			  	<div class="layui-card-body stu" title="${s}" style="height: 150px;">
			   		<c:forEach var = "c" items="${stu}">
			   			<c:if test="${c.groupNumber == s}">
			   				<span title="${c.id}" style="margin-right: 20px;" ondblclick='updataGroupLeader(this)' <c:if test="${c.group1 == true}">class='group_leader'</c:if> >${c.name}</span>
			   			</c:if>
			   		</c:forEach>
			  	</div>
			</div>
		</c:forEach>
		<div style="clear:both;"></div>
		<div style="text-align: right; margin-top: 30px; margin-bottom: 30px; padding-top: 20px; border-top: 1px solid red;">
			<input type="button" class="layui-btn layui-btn-primary" onclick="close2()" value="返回" />
		</div>
	</c:if>
	
	<script>
		function fun(){
			$(".stu span").draggable({
				helper: "clone",
				zIndex: 2
			});
		}
		
		function close2(){
			$("#content").load("${pageContext.request.contextPath }/tbClass/manage");
		}
		
		function sub2(){
			var classNumber = $("#classNumber").val();
			if(classNumber == ''){
				layer.msg('请输入分组组数');
				return ;
			}
			var order1 = '';
			$("#sortable").each(function(){
				$(this).find('li').each(function() {
                    order1 += $(this).attr("title")+",";
                });
			});
			order1 = order1.substring(0, order1.length-1);
			var tbClassId = $("#tbClassId").val();
			$.post("${pageContext.request.contextPath }/tbClass/grouping", {classNumber: classNumber, order1: order1, tbClassId: tbClassId}, function(result){
				if(result.success){
					layer.msg("分组成功",{offset:'rb'});
					$("#content").load("${pageContext.request.contextPath }/tbClass/groupMsg?id="+tbClassId);
				}else{
					layer.msg("分组失败",{offset:'rb'});
				}
			})
		}
		
		function updataGroupLeader(obj){
			var stuId = $(obj).attr("title");
			var groupNumber = $(obj).parent().attr("title");
			$.post("${pageContext.request.contextPath }/tbClass/updataGroupLeader", {stuid: stuId, groupNumber: groupNumber}, function(result) {
				$(obj).parent().find(".ui-draggable").removeClass("group_leader");
				$(obj).addClass("group_leader");
			});
		}
		
		$(function() {
			$("#sortable").sortable();
			$("#sortable").disableSelection();
			
			fun();
			$(".stu").droppable({
				activeClass: "ui-state-default",
				drop: function(event, ui) {
					var item = ui.draggable;
					var stuid = item.attr("title");
					$("<span class='ui-draggable' title='"+stuid+"' ondblclick='updataGroupLeader(this)' style='margin-right: 20px;' ></span>").text(ui.draggable.text()).appendTo(this);
					var groupNumber = $(this).attr("title");
					item.remove();
					fun();
					$.post("${pageContext.request.contextPath }/tbClass/groupUpdata", {stuid: stuid, groupNumber: groupNumber}, function(result) {
					});
				}
			})
			
		});
	</script>
</body>
